<template>
  <div class="home">
    <!-- 搜索框和背景 -->
    <div class="top">
      <div class="hero-content">
        <h1>开启您的理想租房生活</h1>
        <p class="subtitle">在您喜欢的城市找到温馨的家</p>
        <div class="search-container">
          <el-form :inline="true" :model="formSearch" class="formsearch">
            <el-form-item>
              <div class="form-label">标题/小区</div>
              <el-input 
                v-model="formSearch.title" 
                placeholder="请输入房源相关信息" 
                class="search-input"
                prefix-icon="el-icon-search"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="form-label">城市</div>
              <el-select 
                v-model="formSearch.city" 
                placeholder="选择城市" 
                class="search-select"
                clearable>
                <el-option label="北京" value="北京"></el-option>
                <el-option label="上海" value="上海"></el-option>
                <el-option label="广州" value="广州"></el-option>
                <el-option label="深圳" value="深圳"></el-option>
                <el-option label="杭州" value="杭州"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="form-label">租房类型</div>
              <el-select 
                v-model="formSearch.type" 
                placeholder="选择类型" 
                class="search-select"
                clearable>
                <el-option label="整租" value="whole"></el-option>
                <el-option label="合租" value="share"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="form-label">月租金范围</div>
              <el-select 
                v-model="formSearch.range" 
                placeholder="选择价格"
                clearable>
                <el-option label="1000以内" value="1000"></el-option>
                <el-option label="2000以内" value="2000"></el-option>
                <el-option label="3000以内" value="3000"></el-option>
                <el-option label="4000以内" value="4000"></el-option>
                <el-option label="5000以内" value="5000"></el-option>
                <el-option label="5000以上" value="5001"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button 
                type="primary" 
                @click="onSubmit" 
                class="search-btn"
                icon="el-icon-search">
                立即搜索
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    
    <!-- 热门推荐 -->
    <div class="recommend-section">
      <div class="container">
        <!-- 整租推荐 -->
        <div class="recommend-block">
          <div class="section-header">
            <h2 class="section-title">最新整租房源</h2>
            <p class="section-subtitle">精选优质整租公寓，享受独立生活空间</p>
          </div>
          <div class="house-list">
            <houseItem 
              v-for="item in wholeList" 
              :key="item.id" 
              :item="item"
              class="house-item">
            </houseItem>
          </div>
          <div class="view-more">
            <el-button 
              @click="more('whole')" 
              type="primary" 
              plain
              round>
              查看更多整租房源 <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </div>
        
        <!-- 合租推荐 -->
        <div class="recommend-block">
          <div class="section-header">
            <h2 class="section-title">最新合租房源</h2>
            <p class="section-subtitle">经济实惠的合租选择，结识新朋友</p>
          </div>
          <div class="house-list">
            <houseItem 
              v-for="item in shareList" 
              :key="item.id" 
              :item="item"
              class="house-item">
            </houseItem>
          </div>
          <div class="view-more">
            <el-button 
              @click="more('share')" 
              type="primary" 
              plain
              round>
              查看更多合租房源 <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import houseItem from '@/components/houseItem.vue'

export default {
  name: 'Home',
  components: {
    houseItem
  },
  created() {
    this.getHouseInfo()
  },
  data() {
    return {
      formSearch: {
        title: '',
        city: '',
        type: '',
        range: ''
      },
      wholeList: [],
      shareList: []
    }
  },
  methods: {
    onSubmit() {
      this.$router.push({
        path: '/index/renttype',
        query: {
          title: this.formSearch.title,
          city: this.formSearch.city,
          type: this.formSearch.type,
          range: this.formSearch.range
        }
      });
    },
    async getHouseInfo() {
      const info1 = {
        title: '',
        city: '',
        rentType: 'whole',
        minPrice: '0',
        maxPrice: '999999',
        minArea: '0',
        maxArea: '999'
      }
      const { data: res1 } = await this.$axios.post('/api/house/search', info1)
      if (res1.status === 200) {
        this.wholeList = res1.data.slice(0, 6);
      }
      info1.rentType = 'share'
      const { data: res2 } = await this.$axios.post('/api/house/search', info1)
      if (res2.status === 200) {
        this.shareList = res2.data.slice(0, 6);
      }
    },
    more(type) {
      this.$router.push({
        path: '/index/renttype',
        query: {
          type: type,
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  background-color: #f8f9fe;
  min-height: 100vh;
}

/* 顶部背景和搜索区域 */
.top {
  width: 100%;
  height: 600px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), 
                    url(@/assets/background.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, #f8f9fe);
  }
}

.hero-content {
  max-width: 1200px;
  width: 100%;
  padding: 0 20px;
  animation: fadeIn 1s ease;
  
  h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
  }
}

.search-container {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  max-width: 1200px;
  margin: 0 auto;
}

.formsearch {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 15px;
}

.el-form-item {
  margin-bottom: 0;
  flex: 1;
  min-width: 200px;
}

.form-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 8px;
  text-align: left;
  font-weight: 500;
}

.search-input, .search-select {
  width: 100%;
  
  &:hover {
    border-color: var(--el-color-primary);
  }
}

.search-btn {
  width: 100%;
  height: 48px;
  font-size: 1rem;
  font-weight: 500;
  background: linear-gradient(to right, #ff7e5f, #fa5d03);
  border: none;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(250, 93, 3, 0.4);
  }
}

/* 推荐区域 */
.recommend-section {
  padding: 80px 0;
  background-color: #f8f9fe;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.recommend-block {
  margin-bottom: 60px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
  
  .section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(to right, #ff7e5f, #fa5d03);
      border-radius: 3px;
    }
  }
  
  .section-subtitle {
    font-size: 1rem;
    color: #777;
    margin-top: 15px;
  }
}

.house-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-bottom: 30px;
}

.house-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
}

.view-more {
  text-align: center;
  margin-top: 30px;
  
  .el-button {
    padding: 12px 30px;
    font-size: 1rem;
    transition: all 0.3s ease;
    
    &:hover {
      background-color: var(--el-color-primary);
      color: white;
      transform: translateX(5px);
    }
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 992px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  
  .house-list {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .top {
    height: auto;
    padding: 80px 0;
  }
  
  .formsearch {
    flex-direction: column;
    align-items: stretch;
  }
  
  .el-form-item {
    min-width: 100%;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }
}

@media (max-width: 576px) {
  .hero-content h1 {
    font-size: 1.8rem;
  }
  
  .section-title {
    font-size: 1.5rem !important;
  }
  
  .house-list {
    grid-template-columns: 1fr;
  }
}
</style>